<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模型语料 - 语料查看与修改</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

    <style>
        /* 原有样式保持不变 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html,
        body {
            width: 100%;
            height: 100%;
            font-family: 'Poppins', sans-serif;
            background: linear-gradient(135deg, #e0f7fa, #f4f4f9);
        }

        .container .navbar {
            width: 100%;
            height: 80px;
            background: linear-gradient(45deg, #0084ff, #00c3ff);
            display: flex;
            align-items: center;
            padding: 0 40px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            transition: background 0.3s ease;
            position: relative;
            z-index: 10;
            gap: 25px;
        }

        .container .navbar a {
            display: inline-block;
            padding: 12px 20px;
            color: white;
            font-size: 18px;
            font-weight: 500;
            text-decoration: none;
            text-align: center;
            transition: all 0.3s ease;
            border-radius: 8px;
            position: relative;
        }

        .container .navbar a:hover {
            background-color: #9acd32;
            transform: translateY(-2px);
        }

        .container .navbar a.active {
            box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
            background-color: rgba(255, 255, 255, 0.1);
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .main-content {
            max-width: 1200px;
            margin: 0 auto;
            padding: 40px 20px;
        }

        .function-card {
            background: white;
            border-radius: 16px;
            box-shadow: 0 8px 24px rgba(0, 132, 255, 0.1);
            padding: 32px;
            margin-bottom: 32px;
            animation: fadeIn 0.6s ease-out;
        }

        .card-title {
            font-size: 24px;
            font-weight: 600;
            color: #0066cc;
            border-bottom: 3px solid #0084ff;
            padding-bottom: 8px;
            margin-bottom: 24px;
        }

        .form-group {
            margin-bottom: 16px;
        }

        .form-group label {
            display: block;
            font-size: 16px;
            color: #333;
            margin-bottom: 8px;
        }

        .form-input {
            width: 100%;
            padding: 12px;
            border: 2px solid #e0e8f2;
            border-radius: 8px;
            font-size: 16px;
            transition: border-color 0.3s ease;
        }

        .form-input:focus {
            outline: none;
            border-color: #0084ff;
        }

        .action-btn {
            width: 100%;
            padding: 14px;
            background-color: #0084ff;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .action-btn:hover {
            background-color: #0066cc;
        }

        .query-result {
            margin-top: 24px;
            padding: 16px;
            background-color: #f8f9fa;
            border-radius: 8px;
            font-size: 16px;
            color: #666;
        }

        .preloaded-corpus {
            margin-top: 24px;
            max-height: 400px;
            overflow-y: auto;
            border: 1px solid #e0e8f2;
            border-radius: 8px;
            padding: 12px;
            background-color: #f8f9fa;
        }

        .preloaded-line {
            display: flex;
            padding: 4px 0;
            border-bottom: 1px solid #e0e8f2;
        }

        .preloaded-line-number {
            min-width: 40px;
            text-align: right;
            margin-right: 16px;
            color: #0084ff;
            font-weight: 500;
        }

        .preloaded-line-content {
            flex: 1;
            white-space: pre-wrap;
            word-break: break-word;
        }

        /* 新增修改记录样式 */
        .edit-history {
            margin-top: 24px;
            border-radius: 8px;
            background-color: #f8f9fa;
            padding: 16px;
        }

        .edit-history h3 {
            font-size: 18px;
            color: #0066cc;
            margin-bottom: 12px;
        }

        .history-item {
            padding: 8px 0;
            border-bottom: 1px solid #e0e8f2;
            font-size: 14px;
        }

        .history-item:last-child {
            border-bottom: none;
        }

        .history-time {
            color: #888;
            font-size: 12px;
        }

        /* 响应式布局 */
        @media (min-width: 768px) {
            .function-cards {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 40px;
            }

            .function-card {
                min-width: 500px;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="navbar">
            <a href="/MainPagehtml/UserCreate.html">用户管理</a>
            <a href="/MainPagehtml/ModelCorpus.html">模型语料</a>
            <a href="/MainPagehtml/ModelShow.html">模型效果</a>
        </div>
    </div>

    <div class="main-content">
        <div class="function-cards">
            <!-- 原有语料修改卡片 -->
            <div class="function-card">
                <h2 class="card-title">语料修改</h2>
                <div class="form-group">
                    <label>语料ID</label>
                    <input type="text" id="modifyId" class="form-input" placeholder="输入需要修改的语料唯一标识">
                </div>
                <div class="form-group">
                    <label>修改内容</label>
                    <textarea id="modifyContent" class="form-input" rows="5" placeholder="输入修改后的语料内容（支持多行文本）"></textarea>
                </div>
                <button class="action-btn" onclick="performModify()">确认修改</button>
                
                <!-- 新增修改记录区域 -->
                <div class="edit-history">
                    <h3>修改记录</h3>
                    <div id="editHistoryList"></div>
                </div>
            </div>

            <!-- 预加载语料显示卡片 -->
            <div class="function-card">
                <h2 class="card-title">预加载语料内容</h2>
                <div id="loadingIndicator" class="text-center py-6 text-gray-500">
                    <i class="fa fa-spinner fa-spin text-2xl mb-2"></i>
                    <p>正在加载语料内容...</p>
                </div>
                <div id="preloadedCorpus" class="preloaded-corpus">
                    <!-- 内容将通过JavaScript动态加载 -->
                </div>
            </div>
        </div>
    </div>

    <script>
        // 全局变量存储语料内容和修改记录
        let corpusData = [];
        let editHistory = [];
        
        // 原有功能保持不变
        const currentUrl = window.location.href;
        const navLinks = document.querySelectorAll('.navbar a');
        navLinks.forEach(link => {
            if (currentUrl.includes(link.getAttribute('href'))) {
                link.classList.add('active');
            }
        });

        // 原有修改功能保持不变
        function performModify() {
            const id = document.getElementById('modifyId').value.trim();
            const content = document.getElementById('modifyContent').value.trim();

            if (!content) {
                content = '已清空';
            }

            if (!id) {
                alert('请填写完整的语料ID');
                return;
            }

            $.ajax({
                method: 'Post',
                url: '/modifycorpus',
                dataType: 'json',
                contentType: 'application/json;charset=utf-8',
                data: JSON.stringify({
                    'id': id,
                    'content': content
                }),
                success: function(data) {
                    if (data.status === 'success') {
                        alert(`成功修改语料ID：${id}\n新内容：${content}`);
                        document.getElementById('modifyId').value = '';
                        document.getElementById('modifyContent').value = '';
                        
                        // 新增：更新语料显示和记录修改
                        updateCorpusDisplay(id, content);
                        recordEdit(id, content);
                    } else {
                        alert('修改失败!');
                    }
                }
            });
        }

        // 新增预加载语料功能
        document.addEventListener('DOMContentLoaded', function() {
            // 替换为实际的TXT文件路径
            const txtFilePath = './datasets.txt';
            
            // 发起AJAX请求获取TXT文件内容
            $.ajax({
                url: txtFilePath,
                method: 'GET',
                dataType: 'text',
                success: function(content) {
                    // 隐藏加载指示器
                    document.getElementById('loadingIndicator').style.display = 'none';
                    
                    // 存储语料数据并显示
                    corpusData = content.split(/\r\n|\n|\r/);
                    displayPreloadedCorpus(content);
                    
                    // 加载历史记录
                    loadEditHistory();
                },
                error: function() {
                    // 隐藏加载指示器
                    document.getElementById('loadingIndicator').style.display = 'none';
                    
                    // 显示错误信息
                    document.getElementById('preloadedCorpus').innerHTML = `
                        <div class="text-center text-red-500 py-10">
                            <i class="fa fa-exclamation-triangle text-4xl mb-3"></i>
                            <p>加载语料文件失败</p>
                            <p class="text-sm mt-2">请确保文件路径正确：${txtFilePath}</p>
                        </div>
                    `;
                }
            });
        });

        // 显示预加载的语料内容，添加行号
        function displayPreloadedCorpus(content) {
            const displayElement = document.getElementById('preloadedCorpus');
            displayElement.innerHTML = '';
            
            // 按行分割内容
            const lines = content.split(/\r\n|\n|\r/);
            
            // 创建行元素并添加行号
            lines.forEach((line, index) => {
                const lineElement = document.createElement('div');
                lineElement.className = 'preloaded-line';
                lineElement.innerHTML = `
                    <span class="preloaded-line-number">${index + 1}.</span>
                    <span class="preloaded-line-content">${escapeHTML(line)}</span>
                `;
                displayElement.appendChild(lineElement);
            });
        }

        // 更新语料显示（新增）
        function updateCorpusDisplay(id, content) {
            // 找到对应行号（假设语料ID就是行号）
            const lineIndex = parseInt(id) - 1;
            
            if (lineIndex >= 0 && lineIndex < corpusData.length) {
                // 更新内存中的语料数据
                corpusData[lineIndex] = content;
                
                // 更新显示
                const lines = document.querySelectorAll('.preloaded-line');
                if (lines[lineIndex]) {
                    const contentElement = lines[lineIndex].querySelector('.preloaded-line-content');
                    if (contentElement) {
                        contentElement.textContent = content;
                        
                        // 添加高亮动画效果
                        lines[lineIndex].style.backgroundColor = '#e0f7fa';
                        setTimeout(() => {
                            lines[lineIndex].style.backgroundColor = '';
                        }, 1000);
                    }
                }
            }
        }

        // 记录修改历史（新增）
        function recordEdit(id, content) {
            const timestamp = new Date().toLocaleString();
            const historyItem = {
                id,
                content,
                timestamp
            };
            
            // 添加到历史记录
            editHistory.unshift(historyItem);
            
            // 保存到本地存储
            localStorage.setItem('corpusEditHistory', JSON.stringify(editHistory));
            
            // 更新历史记录显示
            renderEditHistory();
        }

        // 加载修改历史（新增）
        function loadEditHistory() {
            const savedHistory = localStorage.getItem('corpusEditHistory');
            if (savedHistory) {
                editHistory = JSON.parse(savedHistory);
                renderEditHistory();
            }
        }

        // 渲染修改历史（新增）
        function renderEditHistory() {
            const historyList = document.getElementById('editHistoryList');
            historyList.innerHTML = '';
            
            if (editHistory.length === 0) {
                historyList.innerHTML = '<p class="text-gray-500">暂无修改记录</p>';
                return;
            }
            
            editHistory.forEach(item => {
                const historyItem = document.createElement('div');
                historyItem.className = 'history-item';
                historyItem.innerHTML = `
                    <div><strong>语料ID:</strong> ${item.id}</div>
                    <div><strong>内容:</strong> ${escapeHTML(item.content)}</div>
                    <div class="history-time">${item.timestamp}</div>
                `;
                historyList.appendChild(historyItem);
            });
        }

        // 转义HTML特殊字符，防止XSS
        function escapeHTML(str) {
            return str
                .replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(/"/g, '&quot;')
                .replace(/'/g, '&#039;');
        }
    </script>
</body>

</html>